<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jpuery/jquery.js"></script>
    <script src="../../js/vue/vue.js"></script>

</head>
<body>
<h2>员工列表</h2>
<div id="app">
    <a href="add.html">新增</a>
       <!-- v-for="emp in employees">{{emp.id}}-{{emp.name}}-{{emp.age}}
            <a :href="'edit.html?id='+ emp.id">编辑</a>
            <a href="#" @click="removeById(emp.id)">刪除</a>-->
    <!--jjjjjj-->
            <table cellpadding="0" cellspacing="0" border="1" width="60%">
                <tr align="center">
                    <td>id</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>编辑</td>
                </tr>
                <tr v-for="emp in employees" align="center">
                    <td>{{emp.id}}</td>
                    <td>{{emp.name}}</td>
                    <td>{{emp.age}}</td>
                    <td>
                        <a :href="'edit.html?id=' + emp.id">编辑</a>
                        <a href="" @click="removeById(emp.id)">删除</a>
                    </td>
                </tr>
            </table>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            employees: []
        },
        mounted: function () {
            //this 代表当前所创建的一个对象
            var _this = this;
            //发送请求加载数据

            $.get("http://localhost:9000/employees/list", {}, function (data) {
                if (data.code == 200) {
                    _this.employees = data.data;
                } else {
                    alert(data.msg);
                }
            })
        },
        methods:{
            removeById:function (id) {
                $.get("http://localhost:9000/employees/delete",{id:id},function(data){
                    if (data.code == 200) {
                        window.location.href="list.html"
                    } else {
                        alert(data.msg);
                    }
                })
            }
        }
    });

</script>
</body>
</html>